/**
 * Created by ClearLiang on 2019/4/27
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {StyleSheet, Text, View, ScrollView, FlatList, PanResponder} from 'react-native';
import PropTypes from 'prop-types';

export default class ScrollView_Double extends Component {
    // 属性检测
    static propTypes = {};
    // 默认值设置
    static defaultProps = {};

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {
            data:[
                {name:'第一',age:1},
                {name:'第二',age:2},
                {name:'第三',age:3},
                {name:'第四',age:4},
                {name:'第五',age:5},
                {name:'第六',age:6},
                {name:'第七',age:7},
                {name:'第八',age:8},
                {name:'第九',age:9},
            ],
            isScroll:true,
        };
    }

    // 加载后
    componentDidMount(): void {
        console.log('componentDidMount')
    }

    // 移除前
    componentWillUnmount(): void {
        console.log('componentWillUnmount')
    }

    renderItem(itemData){
        return(
            <View style={{height:100}}>
                <Text style={{fontSize:25}}>{itemData.item.name}</Text>
                <Text style={{fontSize:20}}>{itemData.item.age}</Text>
            </View>
        );
    }

    componentWillMount(): void {
        this._panResponder = PanResponder.create({
            // 要求成为响应者：
            // 如果一个父视图要防止子视图在触摸开始时成为响应器，它应该有一个 onStartShouldSetResponderCapture 处理程序，返回 true。

            // 第一种成为响应者 - 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），是否愿意成为响应者？
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,

            // 第二种成为响应者 - 如果 View 不是响应者，那么在每一个触摸点开始移动（没有停下也没有离开屏幕）时再询问一次：是否愿意响应触摸交互呢？
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,


            onPanResponderGrant: (evt, gestureState) => {
                // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
                // gestureState.{x,y} 现在会被设置为0
            },
            onPanResponderMove: (evt, gestureState) => {
                // 最近一次的移动距离为gestureState.move{X,Y}
                // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                // 一般来说这意味着一个手势操作已经成功完成。
            },
            onPanResponderTerminate: (evt, gestureState) => {
                // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
                // 默认返回true。目前暂时只支持android。
                return true;
            },

        });
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <ScrollView
                    //scrollEnabled={this.state.isScroll}
                    {...this._panResponder.panHandlers}
                    style={{flex:1,flexDirection:'column'}}
                    //stickyHeaderIndices={[3]}
                    onScroll={(event)=>{
                        let offsetY = event.nativeEvent.contentOffset.y; //滑动距离
                        if(offsetY >= 1200){
                            this.setState({
                                isScroll:false,
                            })
                        }
                    }}
                >

                    <View style={{height: 400}}>
                        <Text>第一个</Text>
                    </View>

                    <View style={{height: 400}}>
                        <Text>第二个</Text>
                    </View>

                    <View style={{height: 400}}>
                        <Text>第三个</Text>
                    </View>

                    <FlatList
                        style={{height:500}}
                        //scrollEnabled={!this.state.isScroll}
                        renderItem={this.renderItem.bind(this)}
                        data={this.state.data}
                    />

                </ScrollView>
            </View>

        );
    }
}

// 构建样式
const styles = StyleSheet.create({});
